{% extends "/shared/layout.html" %}
{% block mainContent %}
<div class="header">
  <div class="wrapper">
    <ul>
      <li class="li_750">
        {% include "/shared/user_partial.html" %}
      </li>
      <li class="li_250">
         <div class="u_process">
            <h1>{{user_progess.goal}}{{layoutRes.unitStep}}</h1>
          {{pageRes.dayGoalDesc}}<br />
          <div class="process">
            <div id="percnet" class="percent">
              <img src="../static/images/ren.png" alt="" />
            </div>
          </div>
          {%- if user_progess.progess > 50 -%}
            {{pageRes.lblProgess50Desc|safe|format(user_progess.goalFinish)}}
            <!-- 您今天走了<em>{{user_progess.goalFinish}}</em>步<br/>击败全国<em>99%</em>的男性-->
          {%- elif user_progess.progess > 0 -%}
            {{pageRes.lblProgess1Desc|safe|format(user_progess.goalFinish)}}
            <!-- 您今天走了<em>{{user_progess.goalFinish}}</em>步<br/>击败全国<em>49%</em>的女性-->
          {%- else -%}
            {{pageRes.lblProgess0Desc|safe|format(user_progess.goalFinish)}}
            <!-- 您今天走了<em>{{user_progess.goalFinish}}</em>步<br/>完败全国<em>99%</em>的女性-->
          {%- endif -%}
          
          <div class="notic">
          {%- if user_progess.goalFinish > 13000 -%}
            {{pageRes.lblGoalFinish13000}}
          {%- elif user_progess.goalFinish > 10000 -%}
            {{pageRes.lblGoalFinish10000}}
          {%- elif user_progess.goalFinish > 7000 -%}
            {{pageRes.lblGoalFinish7000}}
          {%- elif user_progess.goalFinish > 4000 -%}
            {{pageRes.lblGoalFinish4000}}
          {%- else -%}
             {{pageRes.lblGoalFinish0}}
          {%- endif -%}</div>
         </div>
      </li>
    </ul>
  </div>
</div>
<div class="wrapper">
  <div class="perf_total">
    <ul>
      <li class="left">
        <div class="perf_pic">
          <img src="../static/images/calories.png" alt="" />
          <a class="btnCalories" href="###">
          {%- if user_kpi.calorieChanged > 0 -%}
            {{pageRes.totalCalMore}}{{user_kpi.calorieChanged|abs}}%
          {%- elif user_kpi.calorieChanged == 0 -%}
            {{pageRes.totalCalEqual}}
          {%- else -%}
            {{pageRes.totalCalLess}}{{user_kpi.calorieChanged|abs}}%
          {%- endif -%}
          </a>
        </div>
        <div class="perf_chart">
          <div class="arrow_down">
            <span class="btnClose"></span>
          </div>
          <div class="chart chartContainer"></div>
        </div>
      </li>
      <li class="right">
        <div class="perf_pic">
          <img src="../static/images/icon_time.png" alt="" />
          <a class="btnWeight" href="###">
            {%- if user_kpi.sporttimeChanged > 0 -%}
              {{pageRes.totalRunTimeMore}}{{user_kpi.sporttimeChanged|abs}}%
            {%- elif user_kpi.sporttimeChanged == 0 -%}
              {{pageRes.totalRunTimeEqual}}
            {%- else -%}
              {{pageRes.totalRunTimeLess}}{{user_kpi.sporttimeChanged|abs}}%
            {%- endif -%}
          </a>
        </div>
        <div class="perf_chart">
          <div class="arrow_down">
            <span class="btnClose"></span>
          </div>
          <div class="chart chartContainer"></div>
        </div>
      </li>
    </ul>
  </div>

  <div class="perf_item">
    <div class="item_list">
      <div class="item_content">
        <ul>
          <li>
            <dl>
              <dd class="item_box" stat-type="run">
                <a href="#itemChart">
                  <div class="item1">
                    {{pageRes.lblRun|safe}}<br />
                    <span>{{user_kpi.run}}</span>{{layoutRes.unitKM}}
                  </div>
                </a>
              </dd>
              <dd class="item_bottom"></dd>
            </dl>
          </li>
          <li>
            <dl>
              <dd class="item_box" stat-type="sleep">
                <a href="#itemChart">
                  <div class="item3">
                    {{pageRes.lblSleep|safe}}<br />
                    <span>{{user_kpi.sleep}}</span>{{layoutRes.unitHour}}
                  </div>
                </a>
              </dd>
              <dd class="item_bottom"></dd>
            </dl>
          </li>
          <li>
            <dl>
              <dd class="item_box" stat-type="diagnose">
                <a href="#itemChart">
                  <div class="item5">
                    {{pageRes.lblDiagnose|safe}}<br />
                    <span>3</span>{{pageRes.lblDianoseEnd}}
                  </div>
                </a>
              </dd>
              <dd class="item_bottom"></dd>
            </dl>
          </li>
          <li>
            <dl>
              <dd class="item_box" stat-type="food">
                <a href="#food">
                  <div class="item6">
                    {{pageRes.lblFood|safe}}<br />
                    <span class="foodCount">0</span>{{pageRes.lblFoodUnit}}
                  </div>
                </a>
              </dd>
              <dd class="item_bottom"></dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <div id="itemChart" name="itemChart" class="chart_box run sleep">
      <div class="select_time">
        <ul>
          <li day-range="0"><a href="###">{{pageRes.lblToday}}</a></li>
          <li day-range="1"><a href="###">{{pageRes.lblYesterday}}</a></li>
          <li day-range="15"><a href="###">{{pageRes.lblLast15}}</a></li>
          <li day-range="-1"><a href="###">{{pageRes.lblCustom}}</a></li>
        </ul>
        <div class="time_range">
          <div class="range_0">
            <select id="txtMinuteRange">
              <option value="0">00:00-06:00</option>
              <option value="6">06:00-12:00</option>
              <option value="12">12:00-18:00</option>
              <option value="18">18:00-24:00</option>
            </select>
          </div>
          <div class="range_1">
            <input id="txtDatePicker" type="text" readonly="true" value="2013-12-13" />
          </div>
          <div class="range_-1">
            <input id="txtStartDate" type="text" readonly="true" value="2013-12-13" /> {{pageRes.lblTo}} 
            <input id="txtEndDate" type="text" readonly="true" value="2013-12-13" />
          </div>
          <div class="range_7"></div>
          <div class="range_15"></div>
        </div>
      </div>
      <div class="select_kpi">
        <ul class="kpi_run">
          <li class="selected" stat-type="calorie"><a href="###">{{layoutRes.unitCal}} </a></li>
          <li stat-type="run"><a href="###">{{layoutRes.unitKM}}</a></li>
        </ul>
        <ul class="kpi_sleep">
          <li class="selected" stat-type="sleep"><a href="###">{{layoutRes.unitSleep}}</a></li>
        </ul>
        
        <span class="share">
          <a id="btnShare" href="###">
            <img src="../static/images/share.png" />  {{pageRes.share}}
          </a>
          <div id="shareContainer" class="bshare_custom">
            <a id="btnSinaShare" href="###" class="sina">{{pageRes.shareSina}}</a>
            <a id="btnTencentShare" href="###" class="tencent">{{pageRes.shareTencent}}</a>
          </div>
        </span>
      </div>
      
      <div class="chart chartContainer"></div>
     
    </div>

    <div  name="diagnose" class="chart_box diagnose">
      <div class="select_kpi">
        <ul class="kpi_diagnose">
          <li class="selected"  stat-type="diagnose1"><a href="###">{{pageRes.lblBeauty}}</a></li>
          <li stat-type="diagnose2"><a href="###">{{pageRes.lblThin}}</a></li>
          <li stat-type="diagnose3"><a href="###">{{pageRes.lblDisease}}</a></li>
        </ul>
      </div>
       <div class="diag_detail diagnoseContainer">
        <div class="diag_block diagnose1" style="display:block;">
          <ul>
            <li>
              <div class="item_title {% if diagnose.diagnose1.diagnose1_1 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose1.diagnose1_1}}</span>%<br>
              {{pageRes.lblDisease1Title1}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease1Desc1}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose1.diagnose1_2 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose1.diagnose1_2}}</span>%<br/>{{pageRes.lblDisease1Title2}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease1Desc2}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose1.diagnose1_3 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose1.diagnose1_3}}</span>%<br/>{{pageRes.lblDisease1Title3}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease1Desc3}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose1.diagnose1_4 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose1.diagnose1_4}}</span>%<br/>{{pageRes.lblDisease1Title4}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease1Desc4}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose1.diagnose1_5 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose1.diagnose1_5}}</span>%<br/>{{pageRes.lblDisease1Title5}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease1Desc5}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose1.diagnose1_6 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose1.diagnose1_6}}</span>%<br/>{{pageRes.lblDisease1Title6}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease1Desc6}}</div>
            </li>
            
          </ul> 
        </div>
        <div class="diag_block diagnose2">
          <ul>
            <li>
              <div class="item_title {% if diagnose.diagnose2.diagnose2_1 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose2.diagnose2_1}}</span>%<br/>{{pageRes.lblDisease2Title1}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease2Desc1}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose2.diagnose2_2 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose2.diagnose2_2}}</span>%<br/>{{pageRes.lblDisease2Title2}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease2Desc2}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose2.diagnose2_3 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose2.diagnose2_3}}</span>%<br/>{{pageRes.lblDisease2Title3}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease2Desc3}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose2.diagnose2_4 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose2.diagnose2_4}}</span>%<br/>{{pageRes.lblDisease2Title4}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease2Desc4}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose2.diagnose2_5 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose2.diagnose2_5}}</span>%<br/>{{pageRes.lblDisease2Title5}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease2Desc5}}</div>
            </li>
            <li>
              <div class="item_title {% if diagnose.diagnose2.diagnose2_6 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose2.diagnose2_6}}</span>%<br/>{{pageRes.lblDisease2Title6}}</div></div>
              <div class="item_desc">{{pageRes.lblDisease2Desc6}}</div>
            </li>
          </ul> 
        </div>
        <div class="diag_block diagnose3">
          <div class="diag_left">
            <ul>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_1 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_1}}</span>%<br/>{{pageRes.lblDisease3Title1}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc1}}</div>
              </li>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_2 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_2}}</span>%<br/>{{pageRes.lblDisease3Title2}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc2}}</div>
              </li>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_3 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_3}}</span>%<br/>{{pageRes.lblDisease3Title3}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc3}}</div>
              </li>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_12 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_12}}</span>%<br/>{{pageRes.lblDisease3Title12}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc12}}</div>
              </li>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_13 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_13}}</span>%<br/>{{pageRes.lblDisease3Title13}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc13}}</div>
              </li>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_15 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_15}}</span>%<br/>{{pageRes.lblDisease3Title15}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc15}}</div>
              </li>
            </ul>
            <div class="diag_desc">
              <div class="title"></div>
              <div class="desc"></div>
            </div>
          </div>
          <div class="diag_right">
              <ul>
                <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_4 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_4}}</span>%<br/>{{pageRes.lblDisease3Title4}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc4}}</div>
              </li>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_5 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_5}}</span>%<br/>{{pageRes.lblDisease3Title5}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc5}}</div>
              </li>
              <li>
                <div class="item_title {% if diagnose.diagnose3.diagnose3_6 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_6}}</span>%<br/>{{pageRes.lblDisease3Title6}}</div></div>
                <div class="item_desc">{{pageRes.lblDisease3Desc6}}</div>
              </li>
                <li>
                  <div class="item_title {% if diagnose.diagnose3.diagnose3_7 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_7}}</span>%<br/>{{pageRes.lblDisease3Title7}}</div></div>
                  <div class="item_desc">{{pageRes.lblDisease3Desc7}}</div>
                </li>
                <li>
                  <div class="item_title {% if diagnose.diagnose3.diagnose3_8 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_8}}</span>%<br/>{{pageRes.lblDisease3Title8}}</div></div>
                  <div class="item_desc">{{pageRes.lblDisease3Desc8}}</div>
                </li>
                <li>
                  <div class="item_title {% if diagnose.diagnose3.diagnose3_9 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_9}}</span>%<br/>{{pageRes.lblDisease3Title9}}</div></div>
                  <div class="item_desc">{{pageRes.lblDisease3Desc9}}</div>
                </li>
                <li>
                  <div class="item_title {% if diagnose.diagnose3.diagnose3_10 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_10}}</span>%<br/>{{pageRes.lblDisease3Title10}}</div></div>
                  <div class="item_desc">{{pageRes.lblDisease3Desc10}}</div>
                </li>
                <li>
                  <div class="item_title {% if diagnose.diagnose3.diagnose3_11 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_11}}</span>%<br/>{{pageRes.lblDisease3Title11}}</div></div>
                  <div class="item_desc">{{pageRes.lblDisease3Desc11}}</div>
                </li>
                
                <li>
                  <div class="item_title {% if diagnose.diagnose3.diagnose3_14 != 100  -%}disabled{%- endif -%}"><div class="percent"><span>{{diagnose.diagnose3.diagnose3_14}}</span>%<br/>{{pageRes.lblDisease3Title14}}</div></div>
                  <div class="item_desc">{{pageRes.lblDisease3Desc14}}</div>
                </li>
                
              </ul> 
          </div>
        </div>
      </div>
    </div>

    <div name="food" class="chart_box food">
      <div class="food_head">
        <div class="head_left sumTitle">{{pageRes.lblFoodDefaultSel|safe}}</div>
        <div class="head_right">{{pageRes.lblFoodRemark|safe}}</div>
      </div>
      <div class="food_ph">
        <em class="ph_cur"></em>
      </div>
      <div class="food_list">
        <div class="list_left">
          
        </div>
        <div class="list_right">
        </div>
        <div class="groupTmpl" style="display:none;">
          <div class="list_group">
            <div class="title">${name}</div>
            <ul>
              ${fn:foods}
            </ul> 
          </div>
        </div>
      </div>
      <div class="food_desc">
        <ul>
          <li>
            {{pageRes.lblFoodDesc1|safe}}
          </li>
          <li>
            {{pageRes.lblFoodDesc2|safe}}
          </li>
        </ul> 
      </div>
    </div>


  </div>
</div>
<div id="runShare" style="display:none;">
  {{pageRes.shareRunContent}}
</div>
<div id="sleepShare" style="display:none;">
  {{pageRes.shareSleepContent}}
</div>
<script type="text/javascript" src="../static/scripts/views/dashbord/etlinking.views.dashbord.js"></script>
<script type="text/javascript">
  $(function() {
    nsbase.views.dashbord.init(); 

    setTimeout(renRun,1000);
    function renRun () {
      var progess = {{user_progess.progess}};
      $("#percnet").animate({"width":progess+"%"},'50000');
    }   
  });
</script>
{% endblock %}